<template>
	<div class="plan-item-list padding-20 row-option" :class="{ 'plan-item-list--active': itemList.checked }">
		<div class="plan-item-left">
			<div class="plan-item-text">
				<ai-cell title="客群名称：" :value="itemList.clusterName" />
			</div>
			<div class="plan-item-title margin-t-20">
				<ai-cell title="潜客总量：" style="margin: 2px 0;" :value="itemList.potentialCustomerCount" />
				<ai-cell title="引流人数：" style="margin: 2px 0;" :value="itemList.attractedCustomerCount" />
			</div>
			<div class="plan-item-text margin-t-20">
				<ai-cell title="策划关键词：" :value="itemList.clusterCharacteristics" />
			</div>
			<div class="plan-item-text margin-t-20">
				<div style="display: flex;">
					<ai-cell title="生成时间：" :value="itemList.createTime" />
					<ai-cell title="预计活跃周期：" :value="itemList.activeWindow" />
				</div>

			</div>
			<div class="plan-item-text plan-flex margin-t-20">
				<ai-cell title="策划方案：" :value="getPlanName(itemList.planNameList)" />
			</div>
		</div>
		<div class="plan-item-right">
			<div class="plan-item-top plan-flex">
				<el-tag type="primary" style="margin-right: 5px;">{{cluster_type(itemList.clusterImportance)}}</el-tag>
                <el-tag type="primary" style="margin-right: 5px;">{{getClusterProcessingValue(itemList.processingStatus)}}</el-tag>
                <el-tag type="primary">{{itemList.clusterSource}}</el-tag>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue";
import aiCell from '/@/components/aiCell2.vue'
import {cluster_type} from "/@/utils/dictionary";
import { StarFilled } from '@element-plus/icons-vue'
let props = defineProps({
	itemList: {
		type: Object,
		default: () => {
			return {};
		},
	},
})
let cluster_processing_status = [
	{ key: 0, value: "未处理" },
	{ key: 1, value: "处理中" },
	{ key: 2, value: "已处理" },
]
let { itemList } = toRefs(props);
const getClusterProcessingValue = (key: number) => {
	let item = cluster_processing_status.find((map) => { return map.key == key });
	return item?.value || '';
}
//策划方案显示
const getPlanName=(value:any)=>{
	return value && value.length>0? value.join("、"):"";
}
let emits = defineEmits(['selectionChange'])
const selectChange = () => {
	itemList.value.checked = !itemList.value.checked;
	emits("selectionChange", itemList.value);
}
</script>

<style scoped lang="scss">
.plan-item-select {
	width: 75px;
	margin: 0 auto;

	.el-button+.el-button {
		margin-left: 0;
		margin-top: 10px;
	}
}

.plan-item-list {
	width: 100%;
	height: 100%;
	border: solid 1px #ccc;
	box-shadow: 1px 1px 1px #ccc;
	border-radius: 8px;
	align-items: stretch;

	.margin-t-30 {
		margin-top: 30px;
	}

	.margin-t-40 {
		margin-top: 40px;
	}

	.plan-item-select-content {
		width: 100%;
		margin-left: 0;
	}

	.margin-t-15 {
		margin-top: 15px;
	}

	.plan-flex {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.plan-item-flex-between {
		justify-content: space-between;
	}

	.ai-cell {
		margin-left: 20px;

		&:first-child {
			margin-left: 0;
		}
	}

	.plan-item-text {
		font-size: 14px;
		line-height: 16px;
		color: #666666;
	}

	.plan-item-title {
		font-size: 30px;
		line-height: 32px;
		color: #333333;
		font-weight: 700;
	}

	&--active {
		background: var(--el-color-primary);

		.plan-item-text {
			color: #fff;
		}

		.plan-item-title {
			color: #fff;
		}
	}

	.plan-item-left {
		width: 100%;
	}

	.plan-item-top {
		justify-content: right;

		.plan-item-star-view {
			&--active {
				color: yellow;
			}
		}

		.plan-item-star {
			width: 14px;
			height: 16px;
			line-height: 16px;
			font-size: 14px;
		}

		.plan-item-star+.plan-item-star {
			margin-left: 5px;
		}
	}

	.plan-item-right {
		width: calc(100% - 700px);
	}
}

.plan-item-list+.plan-item-list {
	margin-top: 50px;
}
</style>
